<template>
<transition name="fade" >
<div class="spWrap" v-if="modelValue">
  <div class="fullScreen">
    <!-- allowTouchMove="false"或者在swiper加上class="swiper-no-swiping" -->
    <div class="screen">
    <swiper 
    :slides-per-view="1"
    :space-between="0"
    :loop="loop"
    navigation
    :lazy="lazy"
    :allowTouchMove="allowTouchMove"
    :autoplay="autoplay"
    :pagination="pagination"
    @swiper="onSwiper"
    @slideChange="onSlideChange">
      <swiper-slide v-for="(item,index) in list" :key="index">
        <!-- Required swiper-lazy class and image source specified in data-src attribute -->
        <div class="pic-wrap"><img :data-src="item.img" class="pic swiper-lazy" /></div>
        <!-- <div class="pic-wrap"><img :src="item.url" class="pic" /></div> -->
        
        <!-- Preloader image -->
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
      </swiper-slide>
    </swiper>
    </div>
    <div class="pageNative inner-padding">
      <div class="tl f14"><span>{{numb}}</span><span class="ml20">{{title}}</span></div>
    </div>
    <div class="pageClose" @click="onClose">
      <div class="tl f14">关闭</div>
    </div>
  </div>
</div>
</transition>
</template>
<script>
import 'swiper/swiper-bundle.min.css'
import SwiperCore, { Navigation, Pagination, Scrollbar, Lazy, Controller, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { reactive, ref, onMounted, inject, computed, watchEffect, nextTick, onUnmounted } from 'vue'
SwiperCore.use([Lazy,Pagination,Navigation,Controller,Scrollbar,Autoplay]);
export default {
  name:'fullScreen',
  components: {
    Swiper,
    SwiperSlide
  },
  props: {
    loop:{
      type: Boolean,
      default: true
    },
    modelValue:{
      type: Boolean,
      default: true
    },
    currentRate:{
      type: [Number,String],
      default: 10
    },
    list:{
      type: Array,
      default: ()=>[
        {img: require('@/assets/images/slide/05.jpg'),title:'Moxy Times Square1'},
        {img: require('@/assets/images/slide/02.jpg'),title:'Moxy Times Square2'},
        {img: require('@/assets/images/slide/03.jpg'),title:'Moxy Times Square3'},
        {img: require('@/assets/images/slide/04.jpg'),title:'Moxy Times Square4'},
      ]
    },
  },
  emits: ['onClose','update:modelValue'],
  setup(props,ctx){
    const swiperRef = ref(null)
    const activeIndex = ref(0)
    const onSwiper = (swiper) => {
      swiperRef.value = swiper
    };
    const onSlideChange = (swiper) => {
      // console.log(66,'slide change',swiper);
      activeIndex.value = swiper.realIndex
    };

    const numb = computed(()=>{
      const total = props.list.length
      const index = activeIndex.value + 1
      return `${index} / ${total}`
    })
    const title = computed(()=>{
      const item = props.list[activeIndex.value]
      return item?item.title:''
    })

    onMounted(()=>{
      // swiperRef.value.slideTo(1,200)
    })

    const autoplay = {
      delay: 100000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    }
    const lazy = {
      loadPrevNext: true,
    }
    
    const pagination = false

    const setNavFixed = inject('setNavFixed')
    const onClose = () => {
      setNavFixed(false)
      ctx.emit('update:modelValue',false)
    }
    
    watchEffect((ret)=>{
      if(props.list.length){
        nextTick(()=>{
          swiperRef.value&&swiperRef.value.lazy.load()
        })
      }
    })

    const allowTouchMove = ref(false)
    const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    const reFun = (e) => {
      const screenW = +document.body.clientWidth || 0
      allowTouchMove.value = screenW<768
      
      nextTick(()=>{
        swiperRef.value&&swiperRef.value.update()
      })
      // setTimeout(()=>{
      //   swiperRef.value&&swiperRef.value.update()
      // },600)
    }
    window.addEventListener(resizeEvt, reFun, false)
    reFun()

    onUnmounted(()=>{
      window.removeEventListener(resizeEvt, reFun, false)
    })

    return {
      lazy, autoplay, pagination, onSwiper, onSlideChange, allowTouchMove,
      onClose,
      numb, title,
    };
  }
}
</script>
<style lang="less" scoped>
.spWrap{
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background: #fff;
    z-index: 2;
    transition: opacity .3s linear;
}
.fullScreen{
  color: #333;
  position: relative;
  height: 100%;
  .padding-top(80px);
  .swiper-container{
    height: 100%;
  }
}
.screen{
  height: 100%;
  max-height: calc(100vh - 171px);
  height: calc(100vh - 171px);
}
.pageNative{
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
  padding-bottom: 32px;
  width: 100%;
}
.pageClose{
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  .margin-top(36px);
  .margin-right(36px);
  transition: margin .4s ease;
  @media @max768{
    .margin-top(22px);
    .margin-right(22px);
  }
  &:hover{
    font-style: italic;
  }
}
.pic-wrap{
  max-height: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .pic{
    position: relative;
    display: block;
    min-width: 200px;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
}
.screen-bot{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.fullScreen {
  ::v-deep(.swiper-button-prev),::v-deep(.swiper-button-next){
    width: 50%;
    height: 100%;
    top: 0;
    opacity: 0;
    &::after{
      display: none;
    }
    &.swiper-button-prev{
      cursor: url(),auto;
    }
    &.swiper-button-next{
      cursor: url(),auto;
    }
  }
}
</style>